<template>
  <div
    class="custom-class van-nav-bar van-hairline--bottom"
    :class="fixed ? 'van-nav-bar--fixed' : ''"
    :style="{ zIndex: zIndex } "
  >
    <div class="van-nav-bar__left" @click="onClickLeft">
      <div v-if="leftArrow || leftText">
        <van-icon
          v-if="leftArrow"
          :name="arrow"
          :custom-class="van-nav-bar__arrow"
        />
        <div v-if=" leftText " class="van-nav-bar__text">{{ leftText }}</div>
      </div>
      <!-- <slot v-else :name="left" /> -->
    </div>
    <div class="van-nav-bar__title title-class van-ellipsis">
      <div v-if=" title ">{{ title }}</div>
      <!-- <slot v-else :name="title" /> -->
    </div>
    <div class="van-nav-bar__right" @click="onClickRight">
      <div v-if=" rightText " class="van-nav-bar__text">{{ rightText }}</div>
      <!-- <slot v-else :name="right" /> -->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: 'WeChat'
    },
    leftText: {
      type: String,
      default: null
    },
    rightText: {
      type: String,
      default: null
    },
    leftArrow: {
      type: Boolean,
      default: true
    },
    fixed: {
      type: Boolean,
      default: false
    },
    zIndex: {
      type: Number,
      default: 1
    }
  },
  methods: {
    onClickLeft(e) {
      this.$emit('click-left');
    },
    onClickRight(e) {
      this.$emit('click-right');
    }
  }
};
</script>

<style lang="scss">
  .van-nav-bar {
    height: 64px;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    text-align: center;
    line-height: 84px;
    background-color: #fff
  }

  .van-nav-bar__arrow {
    color: #38f;
    vertical-align: middle;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
  }

  .van-nav-bar__arrow+.van-nav-bar__text {
    margin-left: -20px;
    padding-left: 25px
  }

  .van-nav-bar--fixed {
    top: 0;
    left: 0;
    width: 100%;
    position: fixed
  }

  .van-nav-bar__title {
    margin: 0 auto;
    max-width: 60%;
    font-size: 16px
  }

  .van-nav-bar__left,
  .van-nav-bar__right {
    bottom: 0;
    font-size: 14px;
    position: absolute
  }

  .van-nav-bar__left {
    left: 15px
  }

  .van-nav-bar__right {
    right: 15px
  }

  .van-nav-bar__text {
    color: #38f;
    margin: 0 -15px;
    padding: 0 15px;
    display: inline-block;
    vertical-align: middle
  }

  .van-nav-bar__text:active {
    background-color: #e8e8e8
  }
</style>